<template>
  <div class="table-box" v-loading="loading">
    <ProTable
      ref="proTable"
      title="授权列表"
      rowKey="sn"
      :columns="columns"
      :request-api="getTableList"
      :data-callback="dataCallback"
      :reset-callback="resetCallback"
      v-if="columns.length"
    >
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
    </ProTable>
    <RoomDialog :dialogVisible="dialogVisible" :handleClose="handleClose" :submitCallback="_submitRoom" />
    <EmployeeDialog :dialogVisible="dialogVisible1" :handleClose="handleClose" :submitCallback="_submitEmployee" />
  </div>
</template>

<script setup lang="tsx" name="cabinetInfo">
import { ref, onMounted } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { getAuthRecordList, getHotelSelList } from "@/api/modules/smartLock/query/index";
import RoomDialog from "../components/RoomDialog.vue";
import EmployeeDialog from "../components/EmployeeDialog.vue";
const loading = ref(false);
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const hotelSelList = ref([]);
const roomName = ref("");
const roomId = ref("");
const empname = ref("");
const empid = ref("");
let columns: any = ref([]);

const proTable = ref();

const dataCallback = (data: any) => {
  const { records, page } = data;
  loading.value = false;
  return {
    list: records,
    total: page.total
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getAuthRecordList({ ...newParams, roomId: roomId.value, empId: empid.value });
};

// 重置表格数据回调函数
const resetCallback = () => {
  roomName.value = "";
  roomId.value = "";
  empname.value = "";
  empid.value = "";
};

/**
 * 获取酒店选择列表
 */
const getHotelSelData = async () => {
  try {
    const res = await getHotelSelList();
    hotelSelList.value = res.data;
    columns.value = [
      { prop: "sn", label: "序号", width: 120 },
      {
        prop: "roomId",
        label: "房间",
        search: { el: "custom", props: { modelValue: roomName } },
        isShow: false,
        _click: () => {
          dialogVisible.value = true;
        }
      },
      {
        prop: "empid",
        label: "职工",
        search: { el: "custom", props: { modelValue: empname } },
        isShow: false,
        _click: () => {
          dialogVisible1.value = true;
        }
      },
      {
        prop: "hotelId",
        label: "酒店名称",
        enum: hotelSelList,
        search: { el: "select" },
        isShow: false
      },
      {
        prop: "begin",
        label: "有效开始时间",
        isShow: false,
        search: { el: "date-picker", props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" } }
      },
      {
        prop: "end",
        label: "有效结束时间",
        isShow: false,
        search: { el: "date-picker", props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" } }
      },
      {
        prop: "lastupdatedtime",
        label: "授权时间",
        minWidth: 200
      },
      {
        prop: "hotelName",
        label: "酒店名称",
        minWidth: 200
      },
      {
        prop: "roomno",
        label: "房间编号",
        minWidth: 120
      },
      {
        prop: "roomName",
        label: "房间名称",
        minWidth: 120
      },
      {
        prop: "empName",
        label: "持卡人",
        minWidth: 120
      },
      {
        prop: "begindatetime",
        label: "有效开始时间",
        minWidth: 200
      },
      {
        prop: "enddatetime",
        label: "有效结束时间",
        minWidth: 200
      },
      {
        prop: "optName",
        label: "授权人员",
        minWidth: 200
      },
      {
        prop: "datatype",
        label: "操作类型",
        minWidth: 120,
        render: scope => {
          const dataTypeVals = [
            { value: "I", label: "新增" },
            { value: "U", label: "修改" },
            { value: "D", label: "删除" }
          ];
          return (
            <>
              <span>{dataTypeVals.find(item => item.value === scope.row.datatype)?.label ?? "—"}</span>
            </>
          );
        }
      },
      {
        prop: "sourcetype",
        label: "来源",
        minWidth: 120,
        render: scope => {
          const dataTypeVals = ["平台", "机务", "酒店"];
          return (
            <>
              <span>{dataTypeVals[scope.row.sourcetype]}</span>
            </>
          );
        }
      }
    ];
  } catch (error) {
    columns.value = [
      { prop: "sn", label: "序号", width: 120 },

      {
        prop: "begin",
        label: "有效开始时间",
        isShow: false,
        search: { el: "date-picker", props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" } }
      },
      {
        prop: "end",
        label: "有效结束时间",
        isShow: false,
        search: { el: "date-picker", props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" } }
      },
      {
        prop: "lastupdatedtime",
        label: "授权时间",
        minWidth: 200
      },
      {
        prop: "hotelName",
        label: "酒店名称",
        minWidth: 200
      },
      {
        prop: "roomno",
        label: "房间编号",
        minWidth: 120
      },
      {
        prop: "roomName",
        label: "房间名称",
        minWidth: 120
      },
      {
        prop: "empName",
        label: "持卡人",
        minWidth: 120
      },
      {
        prop: "begindatetime",
        label: "有效开始时间",
        minWidth: 200
      },
      {
        prop: "enddatetime",
        label: "有效结束时间",
        minWidth: 200
      },
      {
        prop: "optName",
        label: "授权人员",
        minWidth: 120
      },
      {
        prop: "datatype",
        label: "操作类型",
        minWidth: 120,
        render: scope => {
          const dataTypeVals = ["I", "U", "D"];
          return (
            <>
              <span>{dataTypeVals.find(item => item === scope.row.datatype)}</span>
            </>
          );
        }
      },
      {
        prop: "sourcetype",
        label: "来源",
        minWidth: 120,
        render: scope => {
          const dataTypeVals = ["平台", "机务", "酒店"];
          return (
            <>
              <span>{dataTypeVals[scope.row.sourcetype]}</span>
            </>
          );
        }
      }
    ];
    console.log(error);
  }
};

/**
 * 关闭弹窗
 */
const handleClose = () => {
  dialogVisible.value = false;
  dialogVisible1.value = false;
};

const _submitRoom = async (curRoom: { roomName: string; roomId: string }) => {
  roomName.value = curRoom.roomName;
  roomId.value = curRoom.roomId;
  try {
    dialogVisible.value = false;
    proTable.value.getTableList();
  } catch (error) {
    console.log(error);
  }
};

const _submitEmployee = async (curEmployee: { empname: string; empid: string }) => {
  dialogVisible1.value = false;
  empname.value = curEmployee.empname;
  empid.value = curEmployee.empid;
  proTable.value.getTableList();
};

onMounted(() => {
  getHotelSelData();
});
</script>
<style lang="scss">
@import "./index.scss";
</style>
